<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="../../style/layui-v2.5.6/layui/css/layui.css">
</head>
<style> 
    h1{
        text-align:center;
        font-weight:bold;
        margin-bottom:20px;
        font-size:30px;
        margin-top: 8px;
        color: lightsalmon;
    }
    .customerLevelInf-div {
        position: absolute;
        top: 80px;
        left: 350px;
    }

    th {
        color: #FF5722;
        font-weight:bold;
        font-size: 18px;
    }

    input {
        border-radius: 7px;
        padding-left: 10px;
        outline: none;
        font-family: 新宋体;
        border: 2px solid #5FB878;
        height: 30px;
        margin-top: 6px;
    }

    .add-tr-btn {
        background-color: #00FF00;
        height: 40px;
        width: 60px;
        border: none;
        border-radius: 10%;
        font-family: 新宋体;
        color: #FBFBFB;
        margin-top: 15px;
        margin-left: 150px;
        cursor: pointer;
    }

    .del-tr-btn {
        background-color: #eb7350;
        height: 40px;
        width: 60px;
        border: none;
        border-radius: 10%;
        font-family: 新宋体;
        color: #FBFBFB;
        cursor: pointer;
    }

    .addCustomerLevelInf-btn {
        background-color: #FFB800;
        height: 40px;
        width: 60px;
        border: none;
        border-radius: 10%;
        font-family: 新宋体;
        color: #FBFBFB;
        cursor: pointer;
    }

    .del-td {
        color: #fd0505;
        cursor: pointer;
    }

    dialog {
        opacity: 0;
        border: none;
        background-color: #92B8B1;
        color: #020577;
    }

</style>
<body style="background: #FBFBFB">
    <h1>用户级别管理</h1>
    <div class="customerLevelInf-div">
        <form id="addCustomerLevelInf-form">
            <table id="customerLevelInf-tab">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>级别名称</th>
                    <th>最小积分</th>
                    <th>最大积分</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>

            <button type="button" id="add-tr-btn" class="add-tr-btn"><span>添加</span></button>
            <button type="button" id="del-tr-btn" class="del-tr-btn">删除</button>
            <button type="button" id="addCustomerLevelInf-btn" class="addCustomerLevelInf-btn">保存</button>
        </form>
    </div>

    <dialog id="showDialog">
        <div id="dialog-msg"></div>
    </dialog>

    <script type="text/javascript" src="../../style/js/jquery-3.3.1.js"></script>
    <script>
        //入口函数 查询会员级别
        $(function () {
            $.ajax({
                type: "post",
                url: "../../CustomerLevelInf/selCustomerLevelInf.do",
                dataType: "json",
                success: function (json) {
                    // 从后台返回的map集合中取出List集合
                    var data = json.data;
                    for (var i = 0; i < data.length; i++) {
                        var html = "<tr>\n" +
                            "        <td>" + data[i].customer_level + "</td>\n" +
                            "        <td><input name='level_name' value='" + data[i].level_name + "'></td>\n" +
                            "        <td><input name='min_point' value='" + data[i].min_point + "' readonly></td>\n" +
                            "        <td><input name='max_point' value='" + data[i].max_point + "'readonly></td>\n" +
                            "    </tr>";
                        // 把拼接号的值写入到表格中
                        $("#customerLevelInf-tab").append(html);
                    }
                }
            });
        });

        // 添加会员级别
        // 当上一个级别没有添加积分时，不扩展级别栏
        $("#add-tr-btn").click(function () {
            var maxInput = $("#customerLevelInf-tab tr:last input[name='max_point']");
            var i = 0;
            if (maxInput.length > 0) {
                // 调用验证通过后才进行添加
                if (!verify(maxInput)) return;
                i = parseInt(maxInput.val()) + 1;
            }
            // 把已经存在的最大积分框设为只读
            maxInput.attr("readOnly", true);

            var html = "<tr>\n" +
                "        <td>#</td>\n" +
                "        <td><input name='level_name' value=''></td>\n" +
                "        <td><input name='min_point' value='" + i + "' readonly></td>\n" +
                "        <td><input type='number' name='max_point' value=''></td>\n" +
                "    </tr>";
            // append() 在表格末尾追加
            $("#customerLevelInf-tab").append(html);
        });

        // 关于会员积分校验
        // 验证最大积分是否合法
        function verify(obj) {
            // 获取最大积分和最小积分
            var max = parseInt(obj.val());
            // js对象转换jquery对象的方式 $(js对象)
            var min = obj.parent().prev().find("input").val();
            // 关于最大积分是否填写
            if (isNaN(max)) {
                dialog("没有添加上一级别最大积分");
                return false;// 结束该添加函数
            }

            // 关于最大积分验证
            if (max <= min) {
                dialog("最大积分小于等于最小积分");
                return false;
            }
            return true;
        }



        // 删除最后一行
        $("#del-tr-btn").click(function () {
            // 删除表格中的最后一行
            $("#customerLevelInf-tab tr:last").remove();
            // 信息框
            dialog("删除一行");
        });

        // 保存会员级别
        $("#addCustomerLevelInf-btn").click(function () {
            var maxInput = $("#customerLevelInf-tab tr:last input[name='max_point']");
            if (!verify(maxInput)) return;
            // serialize()表单序列化
            $.ajax({
                type:"post",
                url:"../../CustomerLevelInf/addCustomerLevelInf.do",
                data:$("#addCustomerLevelInf-form").serialize(),
                dataType: "json",
                success:function (data) {
                    dialog("保存成功");
                }
            });
        });



        // 信息框
        function dialog(msg) {
            // 获取弹框元素
            var dialog = document.getElementById("showDialog");
            $("#dialog-msg").text(msg);
            //打开弹框
            dialog.showModal();
            $("dialog").animate({opacity: 1});
            setTimeout(function () {
                //关闭弹框
                $("dialog").animate({opacity: 0}, function () {
                    dialog.close();
                });
            }, 700);
        }

    </script>
</body>
</html>
